import { defineComponent, inject, reactive, watch } from 'vue';
import './source-node.css';
import keyType from '@/assets/images/key.svg';
import numType from '@/assets/images/numType.svg';
import textType from '@/assets/images/textType.svg';
import { FieldType } from '@/hooks/base';

export default defineComponent({
  name: 'SourceNode',
  inject: ['getGraph', 'getNode'],
  setup: () => {
    const getNode: any = inject('getNode');
    const state = reactive(getNode().getData());
    // todo: rest 已经丢弃响应式了
    const { onBindDimension, ...rest } = state;
    getNode().on('change:data', ({ current }: any) => {
      state.isActive = current.isActive
    })
    return () => {
      return (
        <div class={`ax6-source-node ${state.isActive ? 'isActive' : ''}`}>
          <svg class="custom-icon icon" aria-hidden="true">
            <use xlinkHref={`#${FieldType[rest.tableFieldType]}`}></use>
          </svg>
          <span class={`ax6-source-node-field-name ${rest.relationType === 2 ? 'ax6-source-node-field-name-unclick' : ''}`}>
            {rest.tableFieldName}
            {rest.ifPrimaryKey === 1 ? (
              <img class="ax6-source-node-field-key" src={keyType} />
            ) : null}
          </span>
          {rest.relationType === 0 ? (
            <span
              class="ax6-source-node-operate"
              onClick={() => {
                onBindDimension(rest);
              }}
            >
              绑定
            </span>
          ) : null}
          {rest.relationType === 1 ? (
            <span class="ax6-source-node-no-operate">已绑定</span>
          ) : null}
          {rest.relationType === 2 ? (
            <span class="ax6-source-node-no-operate">外键不可用</span>
          ) : null}
        </div>
      );
    };
  }
});
